<template>
	<view style="background: #fff;">
		<view class="top1"><view class="top2">宿求直聘</view></view>
		<view style="height: 176upx;"></view>
		<view class="wrap" style="margin-bottom: 50upx;">
			<!-- 顶部导航栏 -->
			<view class="topbox  mar-top-30" style="display: flex;">
				<view class="addr" @click="cityChange">
					<image
						style="width: 40upx;height: 40upx;"
						src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/34.png"
					></image>
					<text class="fs-32 pad-left-10 fs-24 one-ellipsis">{{ addressInfo.city }}</text>
				</view>
				<view class="s1" @click="sousuo()">
					<div class="s2"><u-icon name="search" color="#C9C9D5" size="31"></u-icon></div>
					<div class="s3">酒店、公寓、职位、帖子</div>
				</view>
				<!-- 搜索框 -->

				<!-- <view class="input-box" @click="search">
					
					<text class="s-txt">酒店、公寓、职位、帖子</text>
					<view class="icon search">
						<image src="https://web.suqzp.com/public/search.png"></image>
					</view>
				</view> -->
			</view>
			<!-- 轮播图 -->
			<view class="swiper-view mar-top-30">
				<swiper class="swiper" autoplay="true" :current="current" @change="swiperChange">
					<swiper-item v-for="(swiper, index) in swiperList" :key="index">
						<image mode="aspectFill" :src="swiper.imgUrl"></image>
					</swiper-item>
				</swiper>
				<view class="dot-s">
					<view
						v-for="(swiper, index) in swiperList"
						:key="index"
						:class="['baner-dian', index === swiperCurrent ? 'on' : '']"
					></view>
				</view>
			</view>
			<!-- 通知 -->
			<view class="notice flex mar-top-30">
				<image
					src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/sqzp/common/pf72BiMmZC.png"
					alt=""
					class="nt-img"
				></image>
				<swiper
					class="flex-1"
					style="height:50rpx"
					:autoplay="true"
					:interval="2500"
					:circular="true"
					:duration="1000"
					:vertical="true"
				>
					<swiper-item style="height:50rpx" v-for="(item, i) in noticeList" :key="i">
						<view class="fs-28 one-ellipsis flex-1 mar-left-10">{{ item.noticeTitle }}</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 分类 -->
			<view class="category-list mar-top-30">
				<swiper class="swiper" duration="300" :style="{ height: categoryHeight }" @change="categoryChange">
					<swiper-item v-for="(page, pageindex) in categoryList" :key="pageindex">
						<view class="category flex  ">
							<view
								class="icon "
								v-for="(category, index) in page"
								:key="index"
								@tap="toCategory(category.id)"
							>
								<image mode="widthFix" :src="category.img"></image>
								<view>{{ category.name }}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="dots">
					<view
						v-for="(page, pageindex) in categoryList"
						:key="pageindex"
						:class="{ active: pageindex == currentPageindex }"
					></view>
				</view>
			</view>
			<!-- 推荐 -->
			<view class="tab-box mar-top-40">
				<scroll-view scrollX class="tabs-list">
					<view class="tabs-list">
						<view
							@tap="handleTapTab"
							:class="
								'ignoreT2 ptp_exposure tab-item ' +
									(item.key === '4' ? 'anchor' : '') +
									' ' +
									(index === active ? 'active' : '')
							"
							:data-index="index"
							v-for="(item, index) in tabList"
							:key="index"
						>
							<view>{{ item.value }}</view>
							<text class="fs-24">{{ item.text }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- car -->
			<view class="" v-if="active == 0">
				<view class="r1">
					<view class="r2">
						<view class="r3">
							<image
								src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/36.png"
							></image>
						</view>
						<view>
							<view class="r4">
								<view class="r5">高级UI设计</view>
								<view class="r6">急聘</view>
								<view class="r7">6-9K</view>
							</view>
							<view class="r8">
								<view>广州 白云区</view>
								<view>刚刚活跃</view>
								<view>3-5年</view>
								<view>本科</view>
							</view>
							<view class="r9">腾讯科技-UI设计</view>
							<view class="r10">
								<view class="r11">林女士-CEO</view>
								<view class="r12">广东海珠</view>
							</view>
						</view>
					</view>
				</view>
				<view class="r1">
					<view class="r2">
						<view class="r3">
							<image
								src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/36.png"
							></image>
						</view>
						<view>
							<view class="r4">
								<view class="r5">高级UI设计</view>
								<view class="r6">急聘</view>
								<view class="r7">6-9K</view>
							</view>
							<view class="r8">
								<view>广州 白云区</view>
								<view>刚刚活跃</view>
								<view>3-5年</view>
								<view>本科</view>
							</view>
							<view class="r9">腾讯科技-UI设计</view>
							<view class="r10">
								<view class="r11">林女士-CEO</view>
								<view class="r12">广东海珠</view>
							</view>
						</view>
					</view>
				</view>
				<view class="r1">
					<view class="r2">
						<view class="r3">
							<image
								src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/36.png"
							></image>
						</view>
						<view>
							<view class="r4">
								<view class="r5">高级UI设计</view>
								<view class="r6">急聘</view>
								<view class="r7">6-9K</view>
							</view>
							<view class="r8">
								<view>广州 白云区</view>
								<view>刚刚活跃</view>
								<view>3-5年</view>
								<view>本科</view>
							</view>
							<view class="r9">腾讯科技-UI设计</view>
							<view class="r10">
								<view class="r11">林女士-CEO</view>
								<view class="r12">广东海珠</view>
							</view>
						</view>
					</view>
				</view>
				<view class="r1">
					<view class="r2">
						<view class="r3">
							<image
								src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/36.png"
							></image>
						</view>
						<view>
							<view class="r4">
								<view class="r5">高级UI设计</view>
								<view class="r6">急聘</view>
								<view class="r7">6-9K</view>
							</view>
							<view class="r8">
								<view>广州 白云区</view>
								<view>刚刚活跃</view>
								<view>3-5年</view>
								<view>本科</view>
							</view>
							<view class="r9">腾讯科技-UI设计</view>
							<view class="r10">
								<view class="r11">林女士-CEO</view>
								<view class="r12">广东海珠</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 之前留下的 -->
			<!-- <view class="re-card bg-white flex radius-xs" v-for="(jobItem, index) in jobList" :key="index"
				@click="jobsDetail(jobItem)">
				<view class="l-img">
					<image :src="jobItem.enterprise.enterpriseLogo"></image>
				</view>
				<view class="pad-left-20 flex-1">
					<view class="card-top flex jcsb">
						<view style="display: flex;align-items: center;">
							<view class="job-name">
								<text class="text-xl">{{jobItem.jobName}}</text>
							</view>
							<text class="t10">急聘</text>
						</view>
						
						<view class="job-salary text-bold text-blue text-right">
							<text class="text-xl">{{jobItem.salaryRang}}</text>
							
						</view>
					</view>
					<view class="tag-list flex">
						<view v-if="jobItem.keywords" class="tag-item bg-gray"	v-for="(jobtagItem, index) in jobItem.keywords.split(',')" :key="index">
							<text>{{jobtagItem}}</text>
						</view>
						<view class="tag-item bg-gray">
							{{jobItem.requestExperience}}
						</view>
						<view class="tag-item bg-gray">
							{{jobItem.requestEducation}}
						</view>
					</view>
					<view class="place margin-top-xs text-gray text-xs">
						<text class="fa fa-map-marker"></text>
						<text class="margin-left-sm fc-33 fs-26">{{jobItem.profession.professionName}}</text>
					</view>
					<view class="user-info flex align-center">
						<text class="text-xs margin-left-sm text-gray fs-24 fc-99">{{jobItem.user_name}}</text>
						<text
							class="fs-24 fc-99">{{jobItem.jobAddress || jobItem.enterprise.enterpriseAddress}}</text>
					</view>
				</view>
			</view> -->
			<!-- ........ -->
			<view class="recomd-list" v-if="active == 1 || active == 2 || active == 3 || active == 4">
				<view
					class="s-c-item flex"
					v-for="(item, index) in hotelSubList"
					:key="index"
					@click="toHomepage(item.hotelSubId)"
				>
					<view class="s-c-img">
						<view class="t-j">{{ item.hotelSubStar }}</view>
						<view class="pin-j">{{ item.hotelSubStar }}星</view>
						<image :src="item.hotelImgPath[0]"></image>
					</view>
					<view class="flex-1 grade-content">
						<view class="flex">
							<text class="fs-28 fc-33 flex-1 two-ellipsis">{{ item.hotelSubName }}</text>
							<text class="fc-ec">剩余{{ item.freeRoomCount }}间房</text>
							<!-- <text class="fc-ec">1分钟前有人预定</text> -->
						</view>
						<view class="starts">
							<view class="stars" v-if="item.hotelSubStar == 1">
								<image :src="getImgUrl(imgSrc)"></image>
							</view>
							<view class="stars" v-if="item.hotelSubStar == 2">
								<image :src="getImgUrl(imgSrc)"></image>
								<image :src="getImgUrl(imgSrc)"></image>
							</view>
							<view class="stars" v-if="item.hotelSubStar == 3">
								<image :src="getImgUrl(imgSrc)"></image>
								<image :src="getImgUrl(imgSrc)"></image>
								<image :src="getImgUrl(imgSrc)"></image>
							</view>
							<view class="stars" v-if="item.hotelSubStar == 4">
								<image :src="getImgUrl(imgSrc)"></image>
								<image :src="getImgUrl(imgSrc)"></image>
								<image :src="getImgUrl(imgSrc)"></image>
								<image :src="getImgUrl(imgSrc)"></image>
							</view>
							<view class="stars" v-if="item.hotelSubStar == 5">
								<image :src="getImgUrl(imgSrc)"></image>
								<image :src="getImgUrl(imgSrc)"></image>
								<image :src="getImgUrl(imgSrc)"></image>
								<image :src="getImgUrl(imgSrc)"></image>
								<image :src="getImgUrl(imgSrc)"></image>
							</view>
						</view>
						<view class="pression flex">
							<text class="fs-26 fc-84">{{ item.hotelAvgScore }}分</text>
							<text class="fs-26 fc-33">{{ item.hotelComment || 0 }}条评论</text>
							<text class="fs-26 fc-33">{{ item.hotelCollectNo }}人收藏</text>
						</view>
						<view class="flex tags-wap">
							<view class="tags fs-24 one-ellipsis">{{ item.hotelSubPolicy }}</view>
						</view>
						<view class="flex">
							<view class="fs-24 flex-1">
								{{ item.hotelSubProvince }}{{ item.hotelSubCity }}{{ item.hotelSubArea }}
							</view>
							<view class="prices">
								<text class="yx fc-99 fs-24">￥{{ item.price || 0 }}</text>
								<text class="fc-ec fs-36">
									<text class="fs-24">￥</text>
									{{ item.promotionPrice || 0 }}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { mapState, mapGetters } from 'vuex' //位置授权
import { DATA_DIRECTION } from '@/util/Enums'
export default {
	computed: {
		...mapState(['addressInfo']),
		...mapGetters(['isLocation'])
	},
	data() {
		return {
			showCity: true, // 默弹窗显示
			// 轮播图片
			swiperList: [],
			current: 0,
			swiperCurrent: 0,
			noticeList: [
				{
					noticeTitle: '宿求直聘平台上线啦~'
				},
				{
					noticeTitle: '平台上线啦~'
				}
			], //通知
			// 分类菜单
			categoryList: [
				[
					//第一页
					{
						id: 0,
						name: '求职',
						img: this.$mConfig.imgSrcUrl + 'jobs-icon.png'
					},
					{
						id: 2,
						name: '人才公寓',
						img: this.$mConfig.imgSrcUrl + 'person-icon.png'
					},
					{
						id: 1,
						name: '酒店公寓',
						img: this.$mConfig.imgSrcUrl + 'hotel-icon.png'
					},
					{
						id: 3,
						name: '商学院',
						img: this.$mConfig.imgSrcUrl + 'Bus-icon.png'
					}
				],
				[
					//第二页
					{
						id: 4,
						name: '在线客服',
						img: this.$mConfig.imgSrcUrl + 'kf.png'
					},
					{
						id: 5,
						name: '直播',
						img: this.$mConfig.imgSrcUrl + 'zhib.png'
					},
					{
						id: 6,
						name: '抽奖',
						img: this.$mConfig.imgSrcUrl + 'chouj.png'
					},
					{
						id: 7,
						name: '排行榜',
						img: this.$mConfig.imgSrcUrl + 'paih.png'
					}
				]
			],
			categoryHeight: '140rpx',
			currentPageindex: 0,
			active: 0, //推荐选中
			tabList: [
				{
					key: '1',
					value: '推荐职位',
					text: '猜你喜欢'
				},
				{
					key: '2',
					value: '推荐酒店',
					text: '猜你喜欢'
				},
				{
					key: '3',
					value: '附近酒店',
					text: '距离优先'
				},
				{
					key: '4',
					value: '人才房',
					text: '免费入住'
				},
				{
					key: '5',
					value: '经济适用'
				}
			],
			jobList: [],
			jobParams: {
				dataLoadState: {
					pullDownRefresh: false,
					reachBottom: false
				},
				loadingStatus: 'more',
				condition: {
					pageNum: 1,
					pageSize: 10
				},
				total: 0
			},
			hotelSubList: [],
			imgSrc: 'xinx.png'
		}
	},
	//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
	onPullDownRefresh() {
		this.getJobList(DATA_DIRECTION.UP)
		setTimeout(function() {
			uni.stopPullDownRefresh()
		}, 1000)
	},
	onReachBottom() {
		this.getJobList(DATA_DIRECTION.DOWN)
	},
	mounted() {
		let that = this
		uni.setNavigationBarTitle({
			title: '宿求直聘'
		})
		this.$store.dispatch('getCity') //获取当前位置
		this.getBanners()
		this.getJobList(DATA_DIRECTION.UP)
		//选择的城市
		uni.$on('updateData', function(data) {
			that.addressInfo.city = data.city
		})
	},
	methods: {
		sousuo() {
			uni.navigateTo({
				url: '/pages/home_sub/search'
			})
		},
		//选择城市
		cityChange() {
			uni.navigateTo({
				url: '/pages/home_sub/city'
				// url: '/pages/client_choose_cit/client_choose_cit'
			})
		},
		search() {
			uni.navigateTo({
				url: '/pages/index/search'
			})
		},
		//获取轮播图
		async getBanners() {
			let param = {
				pageNum: 1,
				pageSize: 10,
				imgType: 1,
				wxuserId: uni.getStorageSync('wxuser_id')
			}
			let data = await this.$apis.getBanners(param)
			if (data) {
				if (data.code == '200') {
					this.swiperList = data.rows
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			}
		},
		//轮播图指示器
		swiperChange(e) {
			this.swiperCurrent = e.detail.current
		},
		//更新分类指示器
		categoryChange(event) {
			this.currentPageindex = event.detail.current
		},
		//分类跳转
		toCategory(id) {
			if (id == 0) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.type,
					query: {}
				})
			} else if (id == 1) {
				uni.navigateTo({
					url: '../hotel/index?type=' + id
				})
			} else if (id == 2) {
				uni.navigateTo({
					url: '../hotel/index?type=' + id
				})
			} else if (id == 3) {
				uni.navigateTo({
					url: '/pages/user/person/busines/index'
				})
			} else if (id == 4) {
				uni.navigateTo({
					url: ''
				})
			} else if (id == 5) {
				uni.navigateTo({
					url: ''
				})
			} else if (id == 6) {
				uni.navigateTo({
					url: ''
				})
			} else {
			}
		},
		//推荐tab下标
		handleTapTab: function(t) {
			var a = t.currentTarget.dataset.index
			console.log('active', this.active)
			if (this.active !== a) {
				this.active = a
				if (this.active == 0) {
					this.getRecommendJob()
				} else if (this.active == 1) {
					this.getRecommendHotelSub()
				} else if (this.active == 2) {
					this.getRecommendHotelSub(true)
				} else if (this.active == 3) {
					this.getRecommendAuthHotelSub()
				} else if (this.active == 4) {
					this.getRecommendEconomicHotelSub()
				}
			}
		},
		// 获取推荐职位
		getRecommendJob() {
			var param = {
				pageNum: 1,
				pageSize: 5
			}
			this.$apis.getEnterprise_jobList(param).then(res => {
				this.jobList = res.rows
			})
		},
		// 酒店
		getRecommendHotelSub(isRecent) {
			var param = {
				pageNum: 1,
				pageSize: 5,
				status: 0
			}
			if (isRecent) {
				param.paramLongitude = this.addressInfo.lng || ''
				param.paramLatitude = this.addressInfo.lat || ''
				param.withRecent = 1
			}
			this.$apis.getHotelSubList(param).then(res => {
				for (var i = 0; i < res.rows.length; i++) {
					res.rows[i].hotelImgPath = res.rows[i].hotelImgPath.split(',') //逗号是分隔符
				}
				this.hotelSubList = res.rows
			})
		},
		// 人才
		getRecommendAuthHotelSub() {
			let param = {
				pageNum: 1,
				pageSize: 100,
				status: 0,
				withAuth: 1
			}
			this.$apis.getHotelSubList(param).then(res => {
				for (var i = 0; i < res.rows.length; i++) {
					res.rows[i].hotelImgPath = res.rows[i].hotelImgPath.split(',') //逗号是分隔符
				}
				this.hotelSubList = res.rows
			})
		},
		// 经济适用
		getRecommendEconomicHotelSub() {
			var param = {
				pageNum: 1,
				pageSize: 5,
				status: 0
			}
			this.$apis.getHotelSubList(param).then(res => {
				for (var i = 0; i < res.rows.length; i++) {
					res.rows[i].hotelImgPath = res.rows[i].hotelImgPath.split(',') //逗号是分隔符
				}
				this.hotelSubList = res.rows
			})
		},
		//去主页
		toHomepage(id) {
			var type = 1
			if (this.active == 3) {
				type = 2
			}
			uni.navigateTo({
				url: '/pages/hotel/hotel-homepage?hotelSubId=' + id + '&type=' + type
			})
		},
		async getJobList(direction) {
			try {
				if (this.jobParams.dataLoadState.pullDownRefresh || this.jobParams.dataLoadState.reachBottom) return
				this.jobParams.dataLoadState.pullDownRefresh = direction === DATA_DIRECTION.UP
				this.jobParams.dataLoadState.reachBottom = direction === DATA_DIRECTION.DOWN
				if (this.jobParams.dataLoadState.reachBottom) {
					if (this.jobParams.total / this.jobParams.condition.pageSize <= this.jobParams.condition.pageNum) {
						this.jobParams.dataLoadState.reachBottom = false
						this.jobParams.loadingStatus = 'noMore'
						return
					}
				}

				this.jobParams.loadingStatus = 'loading'
				this.jobParams.condition.pageNum = this.$nothing._caseValue(
					direction,
					DATA_DIRECTION.UP,
					1,
					DATA_DIRECTION.DOWN,
					this.jobParams.condition.pageNum + 1
				)
				const data = await this.$apis.getEnterprise_jobList(this.jobParams.condition)
				if (data && data.code === 200) {
					const queryList = data.rows
					this.jobParams.total = data.total
					this.jobList = this.$nothing._caseValue(
						direction,
						DATA_DIRECTION.UP,
						queryList,
						DATA_DIRECTION.DOWN,
						this.jobList.concat(queryList)
					)
					this.jobParams.loadingStatus = queryList.length > 9 ? 'more' : 'noMore'
				}
				this.jobParams.dataLoadState.pullDownRefresh = false
				this.jobParams.dataLoadState.reachBottom = false
			} catch (e) {
				console.log('e', e)
				this.jobParams.dataLoadState.pullDownRefresh = false
				this.jobParams.dataLoadState.reachBottom = false
			}
		},
		//职位详情
		jobsDetail(item) {
			this.$mRouter.push({
				route: this.$mRoutesConfig.jobsDetail,
				query: {
					id: item.id
				}
			})
		},
		//图片配置域名
		getImgUrl(icon) {
			return this.$mConfig.imgSrcUrl + icon
		}
	}
}
</script>
<style lang="scss" scoped>
.r1 {
	margin-top: 26upx;
	border-bottom: 2upx solid #eeeeee;
	.r2 {
		display: flex;

		.r3 {
			image {
				width: 120upx;
				height: 120upx;
			}
		}
		.r4 {
			display: flex;
			margin-left: 24upx;
			.r5 {
				font-size: 34upx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 600;
				color: #333333;
			}
			.r6 {
				width: 80upx;
				height: 44upx;
				border: 2upx solid #ffa39e;
				background: #fff1f0;
				font-size: 24upx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #ff4d4f;
				text-align: center;
				line-height: 44upx;
				border-radius: 10upx;
				margin-left: 28upx;
			}
			.r7 {
				font-size: 30upx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 600;
				color: #4cbfed;
				margin-left: 194upx;
			}
		}
		.r8 {
			display: flex;
			margin-left: 24upx;
			margin-top: 22upx;
			view {
				height: 36upx;
				background: #f5f6f8;
				padding-left: 12upx;
				padding-right: 12upx;
				font-size: 22upx;
				font-family: Source Han Sans CN-Normal, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-right: 8upx;
				line-height: 36upx;
			}
		}
		.r9 {
			font-size: 26upx;
			font-family: Source Han Sans CN-Normal, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin-left: 24upx;
			margin-top: 28upx;
		}
		.r10 {
			margin-left: 24upx;
			display: flex;
			justify-content: space-between;
			margin-top: 30upx;
			margin-bottom: 32upx;
			.r11 {
				font-size: 22upx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}
			.r12 {
				font-size: 24upx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}
	}
}
.t10 {
	width: 80upx;
	height: 44upx;
	opacity: 1;
	border: 2upx solid #ffa39e;
	background: #fff1f0;
	font-size: 24upx;
	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
	font-weight: 400;
	color: #ff4d4f;
	text-align: center;
	line-height: 44upx;
	margin-left: 28upx;
}
.top1 {
	background: #84c0f4;
	position: fixed;
	height: 176upx;
	width: 100%;
	z-index: 10000;
	display: flex;

	.top2 {
		padding-top: 88upx;
		width: 100%;
		font-weight: 400;
		color: #ffffff;
		font-size: 34upx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		text-align: center;
	}
}

page {
	position: relative;
	background-color: #fff;
}

.topbox {
	/*  #ifdef  APP-PLUS  */
	top: var(--status-bar-height);
	/*  #endif  */

	.addr {
		width: 155upx;
		height: 60rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		font-size: 28rpx;

		image {
			width: 26rpx;
			height: 32rpx;
			display: inline-block;
		}
	}

	.input-box {
		width: 100%;
		height: 80rpx;
		background-color: #f5f5f5;
		position: relative;
		display: flex;
		align-items: center;
		flex: 1;
		border-radius: 100rpx;

		.s-txt {
			text-indent: 80rpx;
			font-size: 28rpx;
			color: #999;
			width: 100%;
		}

		.icon {
			display: flex;
			align-items: center;
			position: absolute;
			top: 28rpx;
			left: 32rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				display: inline-block;
				display: flex;
				align-items: center;
			}
		}

		input {
			padding-left: 72rpx;
			height: 28rpx;
			font-size: 28rpx;
		}
	}
}

/* 轮播 */
.swiper-view {
	position: relative;

	.swiper {
		width: 100%;
		height: 276rpx;

		image {
			width: 100%;
			height: 276rpx;
			border-radius: 14rpx;
		}
	}

	.dot-s {
		position: absolute;
		bottom: 10rpx;
		display: flex;
		justify-content: center;
		height: 15upx;
		width: 100%;

		.baner-dian {
			width: 12rpx;
			height: 8rpx;
			background-color: #fff;
			border-radius: 22rpx;
			margin: 0 4rpx;

			&.on {
				width: 30rpx;
				background-color: #84c0f4;
			}
		}
	}
}

.notice {
	padding: 20rpx 22rpx;
	line-height: 40rpx;
	height: 40rpx;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.050980392156862744);
	border-radius: 14rpx;

	.nt-img {
		width: 40rpx;
		height: 40rpx;
		display: inline-block;
	}
}

/* 分类 */
.category-list {
	width: 100%;
	height: 176rpx;
	background: #ffffff;
	box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.050980392156862744);
	border-radius: 14rpx;

	.dots {
		display: flex;
		justify-content: center;
		height: 15upx;
		width: 100%;

		view {
			width: 12rpx;
			height: 8rpx;
			background-color: rgba(0, 0, 0, 0.2);
			border-radius: 22rpx;
			margin: 0 4rpx;

			&.active {
				width: 30rpx;
				background-color: #84c0f4;
			}
		}
	}

	.swiper {
		width: 100%;
		padding: 10upx 0;

		.uni-swiper-dot {
			width: 20upx;
		}

		.category {
			width: 100%;
			height: auto;
			display: flex;
			justify-content: flex-start;
			padding: 10upx 0;
			flex-flow: wrap;

			.icon {
				width: 25%;
				display: flex;
				flex-flow: wrap;
				justify-content: center;
				font-size: 22upx;
				color: #666;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				view {
					width: 100%;
					display: flex;
					justify-content: center;
				}
			}
		}
	}
}

/* 推荐 */
.tab-box {
	background: #fff;
	border-radius: 32rpx 32rpx 0 0;
}

.tabs-list {
	display: block;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

.tabs-list::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}

.tab-item {
	display: inline-block;
	min-width: 64rpx;
	color: #101d37;
	font-weight: 700;
	font-size: 28rpx;
	height: 106rpx;
	text-align: center;
	line-height: 60rpx;
	margin-right: 50rpx;
	position: relative;
	vertical-align: bottom;
	overflow: initial;

	text {
		position: relative;
		top: -11px;
	}
}

.tab-item.active {
	font-size: 36rpx;
	color: #d97a07;
}

.tab-item.active:after {
	content: '';
	width: 50rpx;
	height: 4rpx;
	position: absolute;
	bottom: 2rpx;
	left: 50%;
	margin-left: -25rpx;
	background: #84c0f4;
	background-size: 100% 100%;
}

.tab-item:first-child {
	min-width: 84rpx;
	margin-left: 32rpx;
}

.tab-item:last-child {
	margin-right: 32rpx;
}

/* /////// */
.re-card {
	width: 100%;
	min-height: 262rpx;
	max-height: 262rpx;
	margin-top: 20rpx;
	border-bottom: 2rpx solid #efefef;
}

.l-img {
	width: 120rpx;
	height: 120rpx;
	position: relative;
	top: 28rpx;

	image {
		width: 120rpx;
		height: 120rpx;
		display: block;
	}
}

.bg-gray {
	background-color: #f1f1f1;
}

.card-top {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
}

.card-top .job-name {
	width: 80%;
}

.card-top .job-salary {
	width: 20%;
}

.tag-list {
	width: 100%;
	height: 60rpx;
	flex-wrap: wrap;
	overflow: hidden;
}

.tag-list .tag-item {
	height: 40rpx;
	line-height: 40rpx;
	padding: 0 10rpx;
	font-size: 12px;
	border-radius: 5rpx;
	color: #606266;
	margin-left: 10rpx;
	margin-top: 10rpx;
	white-space: nowrap;
}

.tag-list .tag-item:first-of-type {
	margin-left: 0;
}

.place {
	width: 96%;
	height: 60rpx;
	line-height: 60rpx;
}

.user-info {
	width: 96%;
	height: 66rpx;
	line-height: 66rpx;
	position: relative;
}

.user-info text:last-of-type {
	position: absolute;
	right: 0;
	font-size: 13px;
	color: #606266;
}

.offer-date {
	width: 96%;
	height: 60rpx;
	line-height: 60rpx;
	border-top: 1px solid #f1f1f1;
	font-size: 13px;
}

.text-right {
	.text-xl {
		color: #4cbfed;
	}
}

.recomd-list {
	.s-c-item {
		width: 100%;
		min-height: 262rpx;
		max-height: 262rpx;
		margin-top: 20rpx;
		border-bottom: 2rpx solid #efefef;

		.s-c-img {
			width: 168rpx;
			height: 218rpx;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			overflow: hidden;
			position: relative;

			image {
				width: 100%;
			}

			.t-j {
				position: absolute;
				top: 0;
				right: 0;
				width: 35rpx;
				height: 30rpx;
				background: #0000006b;
				line-height: 30rpx;
				text-align: center;
				font-size: 24rpx;
				color: #fff;
			}

			.pin-j {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 74rpx;
				height: 44rpx;
				background: #0000006b;
				border-radius: 0px 0px 0px 12rpx;
				font-size: 24rpx;
				color: #f9e75d;
				line-height: 44rpx;
				text-align: center;
			}
		}

		.grade-content {
			margin-left: 20rpx;

			.fc-ec {
				color: #ec7571;
			}

			.stars {
				margin: 10rpx 0;

				image {
					width: 30rpx;
					height: 28rpx;
					display: inline-block;
					margin: 0 5rpx;
				}
			}

			.pression {
				margin: 10rpx 0;

				text {
					padding-right: 35rpx;
				}
			}

			.tags-wap {
				margin: 15rpx 0;
			}

			.tags {
				width: 118rpx;
				height: 36rpx;
				background: #f0f8fe;
				margin-right: 26rpx;
				text-align: center;
				line-height: 36rpx;
				color: #5c9dd6;
			}

			.prices {
				.yx {
					text-decoration: line-through;
				}
			}
		}
	}
}
.s1 {
	display: flex;
	align-items: center;
	width: 532upx;
	height: 80upx;
	background: #f7f9f9;
	border-radius: 30upx;
	.s2 {
		margin-left: 32upx;
	}
	.s3 {
		font-size: 28upx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #b2b1c3;
		margin-left: 18upx;
	}
}
</style>
